<div class="table">
	<base href="<?php echo base_url() ?>" />

	<!--<link type="text/css" rel="stylesheet" href="css/demo_table.css" />
	<div id="ajaxLoadAni" class="regisAni">
		<img src="file/smooth/images/ajax-loader.gif" alt="Ajax Loading Animation" />
		<span>Loading...</span>
	</div>
	-->
	<!-- <table id="records" class="registeredRecord">
		<thead>
			<tr>
					<th width="1">No</th>
					<th>Agent ID</th>
					<th>Agent Name</th>
					<th>Address</th>
					<th>Image</th>
					<th>Valid Status</th>
					<th>Actions</th>
			</tr>
		</thead>
		<tbody></tbody>
	</table> -->

    <table id="records" class="registeredRecord">
        <thead>
        </thead>
        <tbody>
        </tbody>
    </table>

	
	<!-- delete confirmation dialog box -->
	<div id="delConfDialog" title="Confirm">
		<p>Are you sure?</p>
	</div>
	<!-- message dialog box -->
	<div id="msgDialog"><p></p></div>

</div>

<script type="text/template" id="readTemplate" class="registeredTemplate">
        <tr id="${agent_id}">
                <td width="30px">${nomor}</td>
				<td>${agent_id}</td>
				<td>${agent_name}</td>
                <td>${agent_address}</td>
                <td>${image_path}</td>
				<td><img src="<?php echo base_url().'/file/images/'?>${file_name}"/></td>
                <td width="110px"><?=$menu['registered']?></td>
        </tr>
</script>

<script type="text/javascript">

function closeBack()
{
    $("#darkBack").fadeOut("slow");
    $("#popUpItem").fadeOut("slow");
}

function closeItem()
{
    $("#darkBack").fadeOut("slow");
    $("#popUpItem").fadeOut("slow");
}


$(document).keypress(function(e){
    if(e.keyCode==27){
        $("#darkBack").fadeOut("slow"); 
        $("#popUpItem").fadeOut("slow");   
    }
});

jQuery.fn.center = function () {
        this.css("position","absolute");
        this.css("top", ( $(window).height() - this.height() ) / 2+$(window).scrollTop() + "px");
        this.css("left", ( $(window).width() - this.width() ) / 2+$(window).scrollLeft() + "px");
        return this;
    }

var readUrlRegistered   = 'index.php/act_agents/read/registered',
    /**
 * updateUrlRegistered = 'index.php/master/agents/update',    
 *     viewUrlNew    = 'index.php/act_agents/view',
 *     delUrlRegistered    = 'index.php/act_agents/delete/primer',
 */
    delHref,
    updateHref,
    updateId;

$( document ).ready( function() {
	
    readAgentsRegistered();
    
	$( '#msgDialog' ).dialog({
        autoOpen: false,
        buttons: {
            'Ok': function() {
                $( this ).dialog( 'close' );
            }
        }
    });
    
    $( '#delConfDialog' ).dialog({
        autoOpen: false,
        buttons: {
            'No': function() {
                $( this ).dialog( 'close' );
            },
            'Yes': function() {
                //display ajax loader animation here...
                $( '.regisAni' ).fadeIn( 'slow' );
                $( this ).dialog( 'close' );
                $.ajax({
                    url: delHref,
                    success: function( response ) {
                        //hide ajax loader animation here...
                        $( '.regisAni' ).fadeOut( 'slow' );
                        
                        $( '#msgDialog > p' ).html( response );
                        $( '#msgDialog' ).dialog( 'option', 'title', 'Success' ).dialog( 'open' );
                        
                        $( 'a[href=' + delHref + ']' ).parents( 'tr' )
                        .fadeOut( 'slow', function() {
                            $( this ).remove();
                        });
                        
                    } //end success
                });
            } //end Yes
        } //end buttons
    }); //end dialog
    
    
    /*$( '.registeredRecord' ).delegate( 'a.deleteBtn', 'click', function() {
        delHref = $( this ).attr( 'href' );
        $( '#delConfDialog' ).dialog( 'open' );
            return false;
    });*/ //end delete delegate
    // --- Create Record with Validation ---
    
}); //end document ready


// function readAgentsRegistered() {
//     //display ajax loader animation
// 	$( '.regisAni' ).fadeIn( 'slow' );
    
//     $.ajax({
//         url: readUrlRegistered,
//         dataType: 'json',
//         success: function( response ) {
			
// 			var j=1;
//             for( var i in response ) {
//                 response[ i ].updateLink = updateUrlRegistered + '/' + response[ i ].agent_id;
//                 response[ i ].deleteLink = delUrlRegistered + '/' + response[ i ].agent_id;
//                 response[ i ].viewLink = viewUrlNew + '/' + response[ i ].agent_id;
//                 response[ i ].nomor = j;
// 				response[ i ].file_name = ( isValid( response[ i ].lat, response[ i ].lon ) == 1 ) ? 'ok.png' : 'cancel.png';
				
//                 j++;
//             }
			
			
//             //clear old rows
//             $( '.registeredRecord > tbody' ).html( '' );
            
//             //append new rows
//             $( '.registeredTemplate' ).render( response ).appendTo( ".registeredRecord > tbody" );
            
			
// 			//apply dataTable to #records table and save its object in dataTable variable
//             if( typeof dataTableRegistered == 'undefined' )
// 			{
//                 dataTableRegistered = $( '.registeredRecord' ).dataTable({
// 					"bJQueryUI": true
// 				});
// 			}
			
//             //hide ajax loader animation here...
//             $( '.regisAni' ).fadeOut( 'slow' );
//         }
//     });
	
// }// end readUsers

function readAgentsRegistered() {
    $('.registeredRecord').dataTable({
                "bJQueryUI": true, // aktifkan tampilan tabel JQueryUI
                "sAjaxSource": readUrlRegistered, //data source
                "sAjaxDataProp": "aaData", //variabel yg menampung data table
                "bServerSide": true, //serverside processing true
                "bProcessing": true, // tampilkan 'processing...' status saat data dipanggil
                //"sPaginationType": 'fullNumbers',
                "bPaginate": true,
                "aoColumns":[ //tentukan kolom pd tabel yg akan menampung value dari server
                    {"mDataProp": "agent_id", "sTitle": "Agent ID"}, 
                    {"mDataProp": "agent_name", "sTitle": "Agent Name"}, 
                    {"mDataProp": "agent_address", "sTitle": "Agent Address"},
                    {"mDataProp": "user_name", "sTitle": "Maintained By"},
                    {"mDataProp": "image_path", "sTitle": "Image"}
                ],
                "fnRowCallback": function(nRow, aaData, iDisplayIndex, iDisplayIndexFull) 
                {
                    // $(nRow).find('td').eq(-1).after('<a href="'+approveUrlNew+'/'+aaData[0]+'">Approve</a> |  <a href="'+updateUrlNew+'/'+aaData[0]+'">Edit</a> | <a href="'+delUrlNew+'/'+aaData[0]+'">Delete</a>'); //buat link action 
                    $(nRow).find('td').eq(0).before('<td>'+(parseInt(iDisplayIndex,10)+1+parseInt(dis))+'</td>'); //20120719 ayu
                    $(nRow).find('td').eq(-1).after('<?=$menu["registered"]?>'); //buat link action 
                        var linkEditView = $(nRow).find('.viewBtnNew').attr("href")+aaData[0];
                        var linkEditEdit = $(nRow).find('.updateBtnNew').attr("href")+aaData[0];
                        var linkEditAprv = $(nRow).find('.approveBtnNew').attr("href")+aaData[0];
                        var linkEditRjct = $(nRow).find('.rejectBtnNew').attr("href")+aaData[0];                        
                        var deleteGnral  = $(nRow).find('.deleteBtn').attr("href")+aaData[0];

                        $(nRow).find('.viewBtnNew').attr("href",linkEditView);
                        $(nRow).find('.updateBtnNew').attr("href",linkEditEdit);
                        $(nRow).find('.approveBtnNew').attr("href",linkEditAprv);
                        $(nRow).find('.rejectBtnNew').attr("href",linkEditRjct);                        
                        $(nRow).find('.deleteBtn').attr("href",deleteGnral); 
                        
                    /*$(nRow).find('td').eq(4).each(function(){
                        $(this).html('<a href="<?=base_url();?>'+aaData[4]+'"target="_blank">click to see the image</a>');
                        // $(this).html('<a id="'+aaData[4]+'" onclick="popUp(this.id)" target="_blank"><img style="width:50px" src="<?php echo base_url()?>'+aaData[4]+'"/>click to see the image</a>');

                    });*/
                    $(nRow).find('td').eq(5).each(function(){   //20120719 ayu
                        $(this).html('<a href="<?=base_url();?>file/agent/'+aaData[4]+'" target="_blank">click to see the image</a>');
                    });

                    $.ajax({
                        url: "<?=base_url();?>index.php/act_agents/defoger",
                        type: "POST",
                        data: {'str' : aaData[0]},
                        success: function(response) {
                            /*$(nRow).find('td').eq(0).replaceWith(response);*/
                            $(nRow).find('td').eq(1).replaceWith(response); //20120719 ayu
                        }
                    });

                    return nRow;
                }, //20120719 ayu
                
                "fnServerData": function ( sSource, aoData, fnCallback ) { 
                    $.getJSON( sSource, aoData, function (json) { 
                                
                    dis=json['iDisplayStart'];
                    fnCallback(json);
                });}  
    });
    $('.registeredRecord thead tr').find('th').eq(0).before('<th class="ui-state-default">No</th>'); //20120719 ayu
    $('.registeredRecord thead tr').find('th').eq(-1).after('<th class="ui-state-default" width="200px">Action</th>');
}


</script>